<template>
  <tm-app>
    <tm-sheet class="flex flex-col flex-col-center" :round="25" style="height: 100vh; padding: 10px">
      <tm-sheet>
        <tm-sheet :margin="[0, 50, 0, 50]">
          <tm-text :fontSize="46" class="flex flex-row flex-row-center-center">欢迎登录哈哈优选平台</tm-text>
          <!-- <image style="width: 100px; height: 100px" :src="url"></image> -->
        </tm-sheet>

        <view class="flex flex-row flex-row-center-center" :padding="[0]" :margin="[0]">
          <tm-image :round="25" v-if="avatarUrl" style="width: 100px; height: 100px" :src="avatarUrl"></tm-image>
          <view class="" v-else>
            <button
              class="avatar-wrapper flex flex-row flex-row-center-between"
              style="height: 100rpx; width: 700rpx"
              open-type="chooseAvatar"
              @chooseavatar="onChooseAvatar"
            >
              <tm-text :fontSize="40">头像</tm-text>
              <tm-icon :fontSize="50" name="tmicon-user-fill"></tm-icon>
              <view class="flex flex-row flex-row-end-center"></view>
            </button>
          </view>
        </view>

        <view
          class="flex flex-row flex-row-center-between"
          style="height: 100rpx; width: 600rpx; padding: 0 20rpx"
          :margin="[10]"
        >
          <tm-text :fontSize="40">昵称</tm-text>
          <input
            @blur="handleNickNameReview"
            id="nickname-input"
            type="nickname"
            class="weui-input"
            placeholder="请输入昵称"
          />
        </view>
        <tm-sheet class="flex flex-row flex-row-center-center" :padding="[0]">
          <tm-button
            :disabled="disabledLoginBtn"
            icon="tmicon-weixin"
            size="normal"
            color="green"
            label="点击登录"
            @click="handlerLogin"
          ></tm-button>
        </tm-sheet>

        <view style="margin-top: 10px" class="bottom_box">
          <view class="flex flex-row" style="flex-wrap: wrap">
            <tm-icon :font-size="40" color="primary" name="tmicon-ios-arrow-dropdown"></tm-icon>
            <text style="margin-left: 10rpx">登录代表同意</text>
            <text class="text-orange">哈哈优选平台用户协议、隐私政策</text>
          </view>

          并授权使用您的哈哈优选平台账号信息（如昵称、头像、收获地址）以便您统一管理
        </view>
      </tm-sheet>
    </tm-sheet>
  </tm-app>
</template>

<script setup lang="ts">
import tmApp from '@/tmui/components/tm-app/tm-app.vue'
import tmText from '@/tmui/components/tm-text/tm-text.vue'
import tmIcon from '@/tmui/components/tm-icon/tm-icon.vue'
import tmButton from '@/tmui/components/tm-button/tm-button.vue'
import tmImage from '@/tmui/components/tm-image/tm-image.vue'
import { ref } from 'vue'
import type { ResLogin } from '@/types'
import { computed, getCurrentInstance } from 'vue'
import { login, changeInfo } from '@/api'
const instance = getCurrentInstance()

// const url = 'https://img2.baidu.com/it/u=2092827811,169092614&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
const avatarUrl = ref('')
const nickName = ref('')
const onChooseAvatar = (e: any) => {
  console.log(e)

  avatarUrl.value = e.detail.avatarUrl
}

// 获取用户输入昵称
const handleNickNameReview = async () => {
  uni
    .createSelectorQuery()
    .in(instance)
    .select('#nickname-input')
    .fields({
      properties: ['value'],
    })
    .exec((res) => {
      nickName.value = res[0].value
    })
}

// 登录按钮是否禁用
const disabledLoginBtn = computed(() => {
  if (avatarUrl.value && nickName.value) {
    return false
  }
  return true
})

// 登录
const handlerLogin = () => {
  // uni.setStorageSync("token", "token")
  uni.login({
    provider: 'weixin', //使用微信登录
    success: async function (loginRes) {
      // 修改用户昵称、头像
      await changeInfo({
        nickname: nickName.value,
        photoUrl: avatarUrl.value,
      })
      // 获取用户登录凭证code码
      let code = loginRes.code
      // 调用后端接口，获取token
      const res = await login(code)
      uni.clearStorageSync()
      uni.setStorage({
        key: 'token',
        data: res.token,
        success: async () => {
          // 切换至首页
          uni.switchTab({
            url: '/pages/index/index',
          })
        },
      })
    },
  })
}
</script>

<script lang="ts">
export default {
  name: 'Login',
}
</script>

<style scoped lang="scss">
.bottom_box {
  position: absolute;
  bottom: 100rpx;
  letter-spacing: 2rpx;
  font-size: 30rpx;
}

button::after {
  border: none;
}

.choose-avatar-btn,
.user-avatar {
  width: 180rpx;
  height: 180rpx;
}

.weixin-nickname {
  background: #f5f5f5;
  width: 140rpx;
  font-size: 24rpx;
  padding: 5rpx 20rpx 5rpx 20rpx;
}
</style>
